<template>
  <div class="container">
    {{ content }}
    <editor
      ref="aceEditor"
      v-model="content"
      @init="editorInit"
      width="700"
      height="600"
      lang="javascript"
      theme="dracula"
      :options="{
        enableBasicAutocompletion: true,
        enableSnippets: true,
        wrapBehavioursEnabled: true,
        enableLiveAutocompletion: true,
        showFoldWidgets: true,
        tabSize: 4,
        fontSize: 14,
        showPrintMargin: false //去除编辑器里的竖线
      }"
    ></editor>
    <el-button type="primary" size="small" @click="getValue">获 取</el-button>
    <!-- <el-button type="primary" size="small" @click="pre">上一个主题</el-button>
    <el-button type="primary" size="small" @click="next">下一个主题</el-button> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      content: '',
      theme: ''
      // num: 0,
      // arr: [
      //   //将brace/theme文件夹下的所有主题名字拷贝出来
      //   'ambiance',

      //   'chaos',

      //   'chrome',
      //   'clouds',
      //   'clouds_midnight',
      //   'cobalt',
      //   'crimson_editor',
      //   'dawn',
      //   'dracula',
      //   'dreamweaver',
      //   'eclipse',
      //   'github',
      //   'gob',
      //   'gruvbox',
      //   'idle_fingers',
      //   'iplastic',
      //   'katzenmilch',
      //   'kr_theme',
      //   'kuroir',
      //   'merbivore',
      //   'merbivore_soft',

      //   'monokai',
      //   'mono_industrial',
      //   'pastel_on_dark',

      //   'solarized_dark',
      //   'solarized_light',
      //   'sqlserver',
      //   'terminal',
      //   'textmate',
      //   'tomorrow',
      //   'tomorrow_night',
      //   'tomorrow_night_blue',
      //   'tomorrow_night_bright',
      //   'tomorrow_night_eighties',
      //   'twilight',
      //   'vibrant_ink',
      //   'xcode'
      // ]
    };
  },
  components: {
    editor: require('vue2-ace-editor')
  },
  methods: {
    editorInit() {
      //初始化
      require('brace/ext/language_tools'); //language extension prerequsite...
      require('brace/mode/javascript'); //language
      // require("brace/theme/tomorrow_night");
      // for (let i = 0; i < this.arr.length; i++) {
      //方便看哪个主题好看，循坏加载了所有主题，通过点击按钮切换
      // require('brace/theme/' + this.arr[i]);
      // }
      require('brace/theme/dracula');
      require('brace/snippets/javascript'); //snippet
    },
    getValue() {
      //获取编辑器中的值
      console.log('编辑器中的值：' + this.$refs.aceEditor.editor.getValue(), this.content);
      // console.log('编辑器中第一个换行符的位置：' + this.$refs.aceEditor.editor.getValue().indexOf('\n'));
    }
    // pre() {
    //   //切换到上一个主题
    //   if (this.num == 0) {
    //     return;
    //   }
    //   this.num--;
    //   this.theme = this.arr[this.num];
    //   console.log('主题' + this.num + '__' + this.arr[this.num]);
    // },
    // next() {
    //   //切换到下一个主题
    //   if (this.num == this.arr.length - 1) {
    //     return;
    //   }
    //   this.num++;
    //   this.theme = this.arr[this.num];
    //   console.log('主题' + this.num + '__' + this.arr[this.num]);
    // }
  },
  created() {
    this.editorInit();
  },
  mounted() {
    // this.theme = this.arr[0];
    console.log(this.$refs.aceEditor.editor);
  }
};
</script>
<style lang="scss" scoped></style>
